import { Suspense, lazy } from "react";
import { Route, Switch } from "react-router-dom";
import "./App.css";

// 异步引入组件
const Hello = lazy(() => import("./components/Hello"));
const Hi = lazy(() => import("./components/Hi"));
const Main = lazy(() => import("./components/Main"));

function App() {
	return (
		<div className="w-full h-screen flex justify-center items-center">
			<Suspense fallback={<h1 style={{ color: "red" }}>Loading...</h1>}>
				<Switch>
					<Route path="/hello" component={Hello} />
					<Route path="/hi" component={Hi} />
					<Route path="/" component={Main} />
				</Switch>
			</Suspense>
		</div>
	);
}

export default App;
